import React, { useEffect, useState } from 'react';
import { Text, View, FlatList, ListRenderItemInfo } from 'react-native';
import { RootStackNavigation } from '@/navigator/index';
import { connect, ConnectedProps } from 'react-redux';
import { IFound } from '@/models/found';
import Item from './Item';

const connector = connect();

type ModelState = ConnectedProps<typeof connector>;

interface IProps extends ModelState {
    navigation: RootStackNavigation;
}

interface IState {
    list: IFound[];
    currentId: string;
}

function Found(props: Readonly<IProps> & Readonly<IState>) {
    const { dispatch } = props;
    const [list, setList] = useState<IFound[]>([]);
    const [currentId, setCurrentId] = useState('');

    const renderItem = ({ item }: ListRenderItemInfo<IFound>) => {
        const paused = item.id !== currentId;
        return <Item data={item} paused={paused} setCurrentId={setCurrentId} />
    }

    useEffect(() => {
        dispatch({
            type: 'found/fetchList',
            callback: (data: IFound[]) => {
                setList(data)
            },
        });
    }, [])

    return <FlatList
        data={list}
        renderItem={renderItem}
        extraData={currentId}
    />
}

export default connector(Found)